<template>
	<view>
		<view class="header">
			<image src="../../static/tea.png"></image>

		</view>

		<view class="form-item">
			<input placeholder="请输入用户名" v-model="username" />
		</view>
		<view class="form-item">
			<input placeholder="请输入密码" v-model="password" />
		</view>

		<view class="form-item">
			<button @click="login">登录</button>
		</view>
		<view class="other">
			<text>忘记密码</text>
			<text  @click="toBackIndex">回到首页</text>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';





	const username = ref('')
	const password = ref('')

	const login = () => {
		uni.request({
			url: `http://localhost:3000/members?username=${username.value}`,
			success: (res) => {
				console.log(res.data[0])
				if (res.data[0]) {
					if (res.data[0].password === password.value) {
						//成功 本地存储
						uni.setStorageSync("loginUser", JSON.stringify(res.data[0]))
						uni.switchTab({
							url:'/pages/index/index'
						}) 
					
					} else {
						uni.showToast({
							title: '密码错误',
							duration: 2000,
							icon: 'error'
						})

					}



				} else {
					uni.showToast({
						title: '用户不存在',
						duration: 2000,
						icon: 'error'
					})

				}


			}
		});
	}
	
	const toBackIndex  =()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
		
	}
	
	
	
	
</script>

<style scoped>
	.header {
		display: flex;
		justify-content: center;
		height: 400rpx;
		align-items: center;
	}

	.header image {
		height: 200rpx;
		width: 200rpx;
	}

	.form-item {
		min-height: 100rpx;
		margin: 10rpx;
		padding: 10rpx;
	}

	.form-item input {
		border: 1px solid gainsboro;
		height: 90rpx;
		padding-left: 20rpx;

	}

	.form-item button {
		background-color: black;
		color: white;
		margin-top: 100rpx;
		width: 80%;

	}
	
	.other {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		
		
	}
	
	.other  text {
		text-decoration: underline;
		color:grey;
		
		
	}
</style>